/**
 * @file 首页
 * @author liushuang(liushuang04@baijia.com)
 * @date 2019-12-06
 */
import React, {useEffect, useState, useCallback} from 'react';
import {Card, Col, Spin, Button, Divider, Tooltip, Empty} from 'antd';
import {InfoCircleOutlined, DownloadOutlined, ReloadOutlined} from '@ant-design/icons';
import echarts from 'echarts';
import uuid from '~/utils/uuid';
import {echartsOption} from './echartConfig';
import '../common.styl';

export default function EchartCard(props) {
    const {
        span,
        pieUnit,
        tooltipCallback,
        labelCallback,
        loading,
        title,
        onDownload,
        onDetail,
        onBack,
        id = uuid(),
        onDrilling,
        drilingLevel
    } = props;
    const [eChartsInstance, setEChartsInstance] = useState(null);
    const {chart = {}, config = {}} = pieUnit || {};
    const {series = []} = chart || {};
    const seriesData = series.every(ele => !ele?.data?.length > 0);

    const handleEchart = useCallback(() => {
        const chartsInstance = echarts.init(document.getElementById(`echart${id}`));
        setEChartsInstance(chartsInstance);
        if (series?.length && !seriesData) {
            chartsInstance.setOption(echartsOption(chart, tooltipCallback, labelCallback), true);
            chartsInstance.off('click');
            chartsInstance.on('click', params => {
                if (config?.drilling === 0) {
                    return;
                }

                typeof onDrilling === 'function' && onDrilling({
                    unitName: title,
                    unitId: id,
                    info: params
                });
            });
        }
        else {
            echarts.init(document.getElementById(`echart${id}`)).dispose();
        }
    });

    useEffect(() => {
        handleEchart();
    }, []);
    useEffect(() => {
        handleEchart();
    }, [chart]);

    const handleBack = useCallback(() => {
        typeof onBack === 'function' && onBack({
            unitName: title,
            unitId: id,
        });
    }, [title, id, onBack]);

    const handleDetail = useCallback(() => {
        typeof onDetail === 'function' && onDetail({
            unitName: title,
            unitId: id,
        });
    }, [title, id, onDetail]);

    const handleDownload = useCallback(() => {
        typeof onDownload === 'function' && onDownload({
            unitName: title,
            unitId: id,
        });
    }, [title, id, onDownload]);

    return (
        <Col span={span}>
            <Card
                title={title}
                className="common-card"
                extra={(
                    <span className="detail-download">
                        {
                            drilingLevel && drilingLevel?.unitId === pieUnit?.unitId && drilingLevel?.level > 0 ? (
                                <>
                                    <Button
                                        type="link"
                                        onClick={handleBack}
                                        icon={<ReloadOutlined />}
                                    />
                                </>
                            ) : null
                        }
                        <Tooltip title="查看明细">
                            <Button
                                type="link"
                                onClick={handleDetail}
                                icon={<InfoCircleOutlined />}
                            />
                        </Tooltip>
                        <Tooltip title="下载">
                            <Button
                                type="link"
                                onClick={handleDownload}
                                icon={<DownloadOutlined />}
                            />
                        </Tooltip>
                    </span>
                )}
            >
                <Spin spinning={loading}>
                    <div
                        className="echart-card-content default-height"
                        id={`echart${id}`} style={(series?.length && !seriesData) ? {} : {display: 'none'}}
                    />
                    {
                        (series?.length && !seriesData) ? null : <div className="echart-not-data"><Empty /></div>
                    }
                </Spin>
            </Card>
        </Col>
    );
}
